<!DOCTYPE html>
<html style="height: 100%">
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>MarkerWithLabel Example</title>
 <style type="text/css">
   .labels {
     color: red;
     background-color: white;
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 10px;
     font-weight: bold;
     text-align: center;
     width: 42px;
     border: 2px solid black;
     white-space: nowrap;
   }   
 </style>
 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
 <script type="text/javascript" src="markerwithlabel.js"></script>
    
    <script type="text/javascript">

	var getMarkerUniqueId=function(lat,lng){
		return lat+'_'+lng;
	}
    var getLatLng=function(lat,lng){
    	return new google.maps.LatLng(lat,lng);
    }
    var markers=[];
    
    function initialize() {
    	
    	var infoWindow = new google.maps.InfoWindow;
    	
		var userCurrentlat=0;
		var userCurrentlng=0;
		//get user's most recently location from andorid device
		if(window.android){
			userCurrentlat=window.android.getLatitude();
			userCurrentlng=window.android.getLongitude();
		}
		
		//setting mapOption
        var mapOptions = {
          //center: new google.maps.LatLng(-34.397, 150.644),
          center: new google.maps.LatLng(userCurrentlat, userCurrentlng),          
          zoom: 14,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        //create a map
         map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
        //add user's current location
/*         var userlocaion=getLatLng(userCurrentlat,userCurrentlng);
        var userlocation_marker=new google.maps.Marker({
        	position:getLatLng(userCurrentlat,userCurrentlng),
        	map:map,
        	title:"user current location",
        	icon:'userlocation.png'
        }); */
        
        var user_loc_marker = new MarkerWithLabel({
            position: getLatLng(userCurrentlat,userCurrentlng),
            map: map,
            labelContent: "I am Here",
            labelAnchor: new google.maps.Point(22, 0),
            labelClass: "labels", // the CSS class for the label
            labelStyle: {opacity: 1.0}
          });
        google.maps.event.addListener(map, 'click', function(e) {
        	
        	 var lat = e.latLng.lat(); // lat of clicked point
        	    var lng = e.latLng.lng(); // lng of clicked point
        	    var markerId = getMarkerUniqueId(lat, lng); // an that will be used to cache this marker in markers object.
        	    var marker = new google.maps.Marker({
        	        position: getLatLng(lat, lng),
        	        map: map,
        	        id: 'marker_' + markerId
        	    });
        	    markers[markerId] = marker; // cache marker in markers object
        	    
        	     bindMarkerEvents(marker);
          });		
		
        var bindMarkerEvents = function(marker) {
            google.maps.event.addListener(marker, "click", function (e) {
                var markerId = getMarkerUniqueId(e.latLng.lat(), e.latLng.lng()); // get marker id by using clicked point's coordinate
                var marker = markers[markerId]; // find marker
               // removeMarker(marker, markerId); // remove it 
                infoWindow.setContent(marker.id);
                infoWindow.open(map, marker);
            });
        };
        
      }


  google.maps.event.addDomListener(window, 'load', initialize);

    </script>
</head>
<body style="height: 100%; margin: 0; padding: 0" onload="initMap()">
 <div id="map_canvas" style="height: 100%; width: 100%;"></div>
 <div id="log"></div>
</body>
</html>